<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>问卷模板预览</title>
        <link href="/static/lib/layui/css/layui.css" rel="stylesheet"/>
        <link href="/static/css/style.css" rel="stylesheet">
        <style>
            body {
                background-color: #ccc;
            }

            /* 问题展示区样式 */
            #templateQuestion-container {
                margin: 0 auto;
                width: 760px;
                min-height: 100vh;
                padding: 20px 20px;
                background: white;
            }

            #templateQuestion-container li {
                display: block;
                margin: 10px auto;
                width: 550px;
                padding: 5px;
                position: relative;
            }

            .q-header {
                font-size: 18px;
                margin-bottom: 10px;
            }

            .q-body {
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <div id="templateQuestion-container">
            <h2 class="text-center text-primary" th:text="${td.name}+'（预览）'">"该模板不存在或者已被删除！</h2>
            <span class="text-primary text-right" th:text="'发布日期:'+${#dates.format(td.publishDate,'yyyy/MM/dd HH:mm:ss')}"></span>
            <ul id="questions">
                <li th:data-id="${q.id}" th:data-type="${q.questionType}" th:each="q : ${td.questions}">
                    <div class="q-header" th:if="${q.questionType!=5}">
                        <span class="num" th:text="${q.questionNum}+'、'"></span>
                        <span th:for="${q.id}" th:text="${q.questionTitle}"></span>
                    </div>
                    <div class="q-body">
                        <input th:if="${q.questionType==1}" th:name="${q.id}" th:placeholder="${q.inputPlaceholder}"
                               type="text">
                        <textarea cols="60" rows="5" th:if="${q.questionType==2}" th:name="${q.id}"
                                  th:placeholder="${q.inputPlaceholder}"></textarea>
                        <div th:if="${q.questionType==3}">
                            <div th:each="ops : ${q.questionOptions}">
                                <label>
                                    <input th:id="${ops.id}" th:name="${q.id}" type="radio">
                                    <span th:text="${ops.optionText}"></span>
                                </label>
                            </div>
                        </div>
                        <div th:if="${q.questionType==4}">
                            <div th:each="ops : ${q.questionOptions}">
                                <label>
                                    <input th:id="${ops.id}" th:name="${ops.id}" type="checkbox">
                                    <span th:text="${ops.optionText}"></span>
                                </label>
                            </div>
                        </div>
                        <hr th:if="${q.questionType==5}">
                    </div>
                </li>
            </ul>
        </div>
        <div style="position: fixed;top:30%;right: 20px;width: 200px">
            <a th:href="'/questionnaire/createByTemplate?templateId='+${td.id}" class="layui-btn layui-btn-normal layui-icon layui-icon-add-1" style="width: 100%">以此为模板创建问卷</a>
            <br><br>
        </div>
    </body>
    <script src="/static/lib/layui/layui.all.js"></script>
    <script src="/static/lib/jquery-1.9.1.min.js"></script>
</html>